<template>
    <div class="box">
        <div class="title">任务列表</div>
        <div class="list">
            <div :class="{unfinished:item.status==false}" class="task" v-for="(item,index) in $store.state.tasklist" :key="index">
                <div>
                    <span><input @click="handleClick(item)" type="checkbox" :checked="item.status"></span>
                    <span></span>
                    <span></span>
                </div>
                <span @click="deleteList(index)">删除</span>
            </div>

            <div v-show="$store.state.tasklist.length == 0" class="empty">任务列表为空，请去添加一个任务！ </div>
        </div>
    </div>
</template>

<script>

export default {
    methods:{
        handleClick(item){
            // 调用数据仓库中的同步方法changeStatus，修改任务状态
            this.$store.commit('changeStatus',item);
        },
        deleteList(index){
            this.$store.commit('Delete',index);
        }
    }
}
</script>

<style lang="scss" scoped>
    .box{
        .title{
            font-weight: bold;
            line-height: 40px;
        }
        .list{
            .task{
                color: white;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 10px;
                margin: 10px 0;
                background: lightseagreen;
                line-height: 40px;
                .unfinished{
                    background: red;
                }
                span{
                    display: inline-block;
                    margin-right: 10px;
                }
            }
            .empty{
                text-align: center;
                padding: 50px 0;
            }
        }
    }
</style>